<template>
  <div class="loginWrap">
    <div class="loginBox">
      <div class="loginForm">
        <h1 class="loginTitle">用户登录</h1>
        <label for="username">
          <input class="inpBox"
                 type="text" placeholder="用户名" name="username"
                 id="username" v-model="loginInfo.username"/>
        </label>

        <label for="password">
          <input class="inpBox"
                 type="password" placeholder="密码" name="password"
                 id="password" v-model="loginInfo.password"/>
        </label>

        <div class="loginBtn" unselectable="on" @click="loginClick">
          登 &nbsp; 录
        </div>

      </div>
    </div>

    <message-box msg-text="用户名或密码不正确, 登录失败!" v-show="showMsgBox"
                @msgBoxClose="closeMsgBox" :msg-box-style="boxStyle"/>

  </div>
</template>

<script>
	import MessageBox from "components/popbox/MessageBox";
	export default {
		name: "Login",
		components: {MessageBox},
		data() {
			return {
				loginInfo: {
					username: 'admina',
					password: '123456'
				},
				showMsgBox: false,
				boxStyle: {
					height: 150 + 'px',
        }
			}
		},
    methods: {
			async loginClick() {
				// console.log(this.loginInfo);
        let url = '/login';
        //const resp = await this.postRequest(url, this.loginInfo);
        //
        // if (resp.data.code === 0) {
        //   await this.$router.push('/home');
        // } else {
        //   this.showMsgBox = true;
        // }

				await this.$router.push('/home');

			},
			closeMsgBox() {
				this.showMsgBox = false;
      }
    }
	}
</script>
<style scoped>
  .loginWrap {
    width: 100%;
    height: 100%;
    background-color: #eeeeee;
    display: flex;
    justify-content: center;
  }

  .loginBox {
    position: relative;
    width: 400px;
    height: 450px;
    top: 100px;
    background-color: #ffffff;
    box-shadow: 0 5px 15px rgba(0,0,0,.8);
    border-radius: 7px;
    display: flex;
    justify-content: center;
  }

  .loginForm {
    width: 380px;
    height: 400px;
    position: absolute;
  }

  .loginTitle {
    position: relative;
    top: 30px;
    text-align: center;
    -webkit-user-select: none;
  }

  .inpBox {
    position: absolute;
    left: 17%;
    top: 90px;
    width: 230px;
    padding: 10px;
    border: 1px solid #aaa;
    font-size: 18px;
    border-radius: 2px;
  }
  .inpBox:focus {
    outline: none;
    border: 2px solid #668EFF;
  }

  #username {
    margin: 50px auto;
  }

  #password {
    margin: 117px auto;
  }

  .loginBtn {
    width: 230px;
    height: 47px;
    background-color: #377fff;
    margin: 230px auto;
    border-radius: 3px;
    text-align: center;
    line-height: 47px;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    -webkit-user-select: none;
  }

</style>